<template>
  <div class="main">
    <!-- 规则介绍页 -->
    <div v-if="page == 0">
      <introduce :title="title" :time="time" :desc="desc" @nextPage="nextPage" />
    </div>
    <!-- 做题页面 -->
    <div v-else-if="page == 1">
      <match :match-all="matchAll1" :match-init="match1" :match-suc="matchSuc1" title="请移除1根火柴，移动两根火彩，变成一"
        matchGroupWidth="500" @nextQuestion="nextQuestion"></match>
    </div>
    <div v-else-if="page == 2">
      <match :match-all="matchAll2" :match-init="match2" :match-suc="matchSuc2" title="加入四根火柴，将如图所示除A以外的区域分为形状相同的四等分
        <br/>
        （形状相同指仅通过旋转、平移的变化后可重合）" matchGroupWidth="400" :matchGroupHeight="450" @nextQuestion="nextQuestion"
        showA="true"></match>
    </div>
    <div v-else-if="page == 3">
      <match :match-all="matchAll3" :match-init="match3" :match-suc="matchSuc3" title="只能移动四根火柴，请得到两个箭头
        <br/>（箭头大小可以改变）" matchGroupWidth="400" @nextQuestion="nextQuestion"></match>
    </div>
    <!-- 结果显示页面 -->
    <div v-else>
      <div class="show-result">本节共有3个题，您答对<span style="color: #0dbc79;padding:0 5px;font-size:1.4em">{{ score }}</span>题
      </div>
      <div class="next-btn">
        <el-button type="primary" round @click="nextAss">继续测评</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import introduce from "./../com/introduce.vue";
import match from "./match.vue";
import { MatchCalc } from './../../../api/access';

export default {
  name: "ass02",
  data: function () {
    return {
      title: "火柴图形",
      desc: "火柴可以组合许多有趣的几何图形。现在你有一个装满火柴的火柴盒和一个用火柴组合出的图形，请在原图形的基础上改变火柴位置，使火柴组合出另一个有趣的图形（此部分测试分为三个小节，具体要求在小节中有说明）。",
      page: 0, //  当前页
      score: 0, //得分
      //全部可放置的位置
      matchAll1: [
        //top&left确定位置，angle确定旋转角度，默认角度为火柴头垂直向上，+为顺时针旋转
        //第一个框
        //垂直方向
        { top: 15, left: 0, angle: 0 },
        { top: 15, left: 100, angle: 0 },
        { top: 15, left: 50, angle: 0 },
        //水平方向
        { top: -35, left: 50, angle: -90 },
        { top: 65, left: 50, angle: -90 },
        { top: 15, left: 50, angle: -90 },
        //左上
        { top: 15, left: 50, angle: 45 },
        //右上
        { top: 15, left: 50, angle: -45 },

        //第二个框
        //垂直方向
        { top: 15, left: 200, angle: 0 },
        { top: 15, left: 250, angle: 0 },
        { top: 15, left: 300, angle: 0 },
        //水平方向
        { top: -35, left: 250, angle: -90 },
        { top: 15, left: 250, angle: -90 },
        { top: 65, left: 250, angle: -90 },
        //左上
        { top: 15, left: 250, angle: 45 },
        //右上
        { top: 15, left: 250, angle: -45 },

        //第三个框
        //垂直方向
        { top: 15, left: 400, angle: 0 },
        { top: 15, left: 450, angle: 0 },
        { top: 15, left: 500, angle: 0 },
        //水平方向
        { top: -35, left: 450, angle: -90 },
        { top: 15, left: 450, angle: -90 },
        { top: 65, left: 450, angle: -90 },
        //左上
        { top: 15, left: 450, angle: 45 },
        //右上
        { top: 15, left: 450, angle: -45 },
      ],
      match1: [
        //第一个框
        { top: 15, left: 0, angle: 0 },
        { top: 15, left: 100, angle: 0 },
        { top: -35, left: 50, angle: -90 },
        { top: 65, left: 50, angle: -90 },

        //第二个框
        { top: 15, left: 200, angle: 0 },
        { top: 15, left: 300, angle: 0 },
        { top: -35, left: 250, angle: -90 },
        { top: 65, left: 250, angle: -90 },

        //第三个框
        { top: 15, left: 400, angle: 0 },
        { top: 15, left: 500, angle: 0 },
        { top: -35, left: 450, angle: -90 },
        { top: 65, left: 450, angle: -90 },
      ],
      matchSuc1: [
        { top: 15, left: 0, angle: 0 },
        { top: 15, left: 100, angle: 0 },
        { top: -35, left: 50, angle: -90 },
        { top: 65, left: 50, angle: -90 },
        { top: 15, left: 200, angle: 0 },
        { top: 15, left: 300, angle: 0 },
        { top: 15, left: 400, angle: 0 },
        { top: -35, left: 450, angle: -90 },
        { top: 65, left: 450, angle: -90 },
        { top: 15, left: 250, angle: -45 },
        { top: 15, left: 450, angle: -90 },
      ],

      //全部可放置的位置
      matchAll2: [
        //垂直方向
        { top: 15, left: 0, angle: 0 },
        { top: 115, left: 0, angle: 0 },
        { top: 215, left: 0, angle: 0 },
        { top: 315, left: 0, angle: 0 },
        { top: 15, left: 100, angle: 0 },
        { top: 115, left: 100, angle: 0 },
        { top: 215, left: 100, angle: 0 },
        { top: 315, left: 100, angle: 0 },
        { top: 15, left: 200, angle: 0 },
        { top: 115, left: 200, angle: 0 },
        { top: 215, left: 200, angle: 0 },
        { top: 315, left: 200, angle: 0 },
        { top: 15, left: 300, angle: 0 },
        { top: 115, left: 300, angle: 0 },
        { top: 215, left: 300, angle: 0 },
        { top: 315, left: 300, angle: 0 },
        { top: 15, left: 400, angle: 0 },
        { top: 115, left: 400, angle: 0 },
        { top: 215, left: 400, angle: 0 },
        { top: 315, left: 400, angle: 0 },
        { top: -35, left: 50, angle: -90 }, // top: 0, // left: 15,
        { top: -35, left: 150, angle: -90 },
        { top: -35, left: 250, angle: -90 },
        { top: -35, left: 350, angle: -90 },
        { top: 65, left: 50, angle: -90 },
        { top: 65, left: 150, angle: -90 },
        { top: 65, left: 250, angle: -90 },
        { top: 65, left: 350, angle: -90 },
        { top: 165, left: 50, angle: -90 },
        { top: 165, left: 150, angle: -90 },
        { top: 165, left: 250, angle: -90 },
        { top: 165, left: 350, angle: -90 },
        { top: 265, left: 50, angle: -90 },
        { top: 265, left: 150, angle: -90 },
        { top: 265, left: 250, angle: -90 },
        { top: 265, left: 350, angle: -90 },
        { top: 365, left: 50, angle: -90 },
        { top: 365, left: 150, angle: -90 },
        { top: 365, left: 250, angle: -90 },
        { top: 365, left: 350, angle: -90 },
      ],
      match2: [
        { top: 15, left: 0, angle: 0 },
        { top: 115, left: 0, angle: 0 },
        { top: 215, left: 0, angle: 0 },
        { top: 315, left: 0, angle: 0 },
        { top: 15, left: 400, angle: 0 },
        { top: 115, left: 400, angle: 0 },
        { top: 215, left: 400, angle: 0 },
        { top: 315, left: 400, angle: 0 },
        { top: 15, left: 200, angle: 0 },
        { top: 115, left: 200, angle: 0 },
        // { top: 215, left: 200,  angle: 0 },
        // { top: 315, left: 200,  angle: 0 },
        { top: -35, left: 50, angle: -90 },
        { top: -35, left: 150, angle: -90 },
        { top: -35, left: 250, angle: -90 },
        { top: -35, left: 350, angle: -90 },
        { top: 365, left: 50, angle: -90 },
        { top: 365, left: 150, angle: -90 },
        { top: 365, left: 250, angle: -90 },
        { top: 365, left: 350, angle: -90 },
        // { top: 165, left: 50, angle: -90, },
        // { top: 165, left: 150, angle: -90, },
        { top: 165, left: 250, angle: -90 },
        { top: 165, left: 350, angle: -90 },
      ],
      matchSuc2: [
        { top: 15, left: 0, angle: 0 },
        { top: 115, left: 0, angle: 0 },
        { top: 215, left: 0, angle: 0 },
        { top: 315, left: 0, angle: 0 },
        { top: 215, left: 400, angle: 0 },
        { top: 315, left: 400, angle: 0 },
        { top: 15, left: 200, angle: 0 },
        { top: 115, left: 200, angle: 0 },
        { top: 315, left: 200, angle: 0 },
        { top: -35, left: 50, angle: -90 },
        { top: -35, left: 150, angle: -90 },
        { top: 365, left: 50, angle: -90 },
        { top: 365, left: 150, angle: -90 },
        { top: 365, left: 250, angle: -90 },
        { top: 365, left: 350, angle: -90 },
        { top: 165, left: 50, angle: -90 },
        { top: 165, left: 250, angle: -90 },
        { top: 165, left: 350, angle: -90 },
        { top: 65, left: 150, angle: -90 },
        { top: 115, left: 100, angle: 0 },
        { top: 215, left: 100, angle: 0 },
        { top: 265, left: 150, angle: -90 },
        { top: 265, left: 250, angle: -90 },
        { top: 215, left: 300, angle: 0 },
      ],
      //全部可放置的位置
      matchAll3: [
        //垂直方向
        { top: 15, left: 0, angle: 0 },
        { top: 115, left: 0, angle: 0 },
        { top: 15, left: 100, angle: 0 },
        { top: 115, left: 100, angle: 0 },
        { top: 15, left: 200, angle: 0 },
        { top: 115, left: 200, angle: 0 },
        { top: 15, left: 300, angle: 0 },
        { top: 115, left: 300, angle: 0 },
        { top: 15, left: 400, angle: 0 },
        { top: 115, left: 400, angle: 0 },

        { top: -35, left: 50, angle: -90 }, // top: 0, // left: 15,
        { top: -35, left: 150, angle: -90 },
        { top: -35, left: 250, angle: -90 },
        { top: -35, left: 350, angle: -90 },
        { top: 65, left: 50, angle: -90 },
        { top: 65, left: 150, angle: -90 },
        { top: 65, left: 250, angle: -90 },
        { top: 65, left: 350, angle: -90 },
        { top: 165, left: 50, angle: -90 },
        { top: 165, left: 150, angle: -90 },
        { top: 165, left: 250, angle: -90 },
        { top: 165, left: 350, angle: -90 },
        { top: 15, left: 50, angle: -90 },
        { top: 15, left: 150, angle: 90 },
        { top: 15, left: 250, angle: -90 },
        { top: 15, left: 350, angle: 90 },
        { top: 115, left: 50, angle: -90 },
        { top: 115, left: 150, angle: 90 },
        { top: 115, left: 250, angle: -90 },
        { top: 115, left: 350, angle: 90 },

        { top: -10, left: 50, angle: 120 },
        { top: 35, left: 50, angle: -120 },
        { top: -10, left: 150, angle: 60 },
        { top: 35, left: 150, angle: -60 },
        { top: -10, left: 250, angle: 120 },
        { top: 35, left: 250, angle: -120 },
        { top: -10, left: 350, angle: 60 },
        { top: 35, left: 350, angle: -60 },

        { top: 90, left: 50, angle: 120 },
        { top: 135, left: 50, angle: -120 },
        { top: 90, left: 150, angle: 60 },
        { top: 135, left: 150, angle: -60 },
        { top: 90, left: 250, angle: 120 },
        { top: 135, left: 250, angle: -120 },
        { top: 90, left: 350, angle: 60 },
        { top: 135, left: 350, angle: -60 },
      ],
      match3: [
        { top: 115, left: 200, angle: 0 },
        { top: 65, left: 50, angle: -90 },

        { top: 65, left: 150, angle: -90 },
        { top: 15, left: 200, angle: 0 },
        { top: -10, left: 250, angle: 120 },
        { top: 35, left: 350, angle: -60 },
        { top: 90, left: 350, angle: 60 },
        { top: 135, left: 250, angle: -120 },
      ],
      matchSuc3: [
        { top: 15, left: 200, angle: 0 },
        { top: -10, left: 250, angle: 120 },
        { top: 135, left: 250, angle: -120 },
        { top: 35, left: 250, angle: -120 },
        { top: 90, left: 250, angle: 120 },
        { top: 15, left: 150, angle: 90 },
        { top: 115, left: 200, angle: 0 },
        { top: 115, left: 150, angle: 90 },
      ],
    };
  },
  methods: {
    // 由介绍页到第一页
    nextPage: function () {
      this.page = 1;
    },
    nextQuestion(data) {
      console.log("进入父组件的nextQuestion");
      if (data.next) {
        this.page++;
      }
      if (data.result) this.score += 1;
    },
    nextAss: function () {
      MatchCalc({
        uid: this.$store.state.User.uid,
        score: this.score
      }).then(res => {
        if (res.rescode == 200) {
          this.$emit("nextAss");
        }
      })
    },
  },
  components: { introduce, match },
};
</script>

<style scoped lang="less">
@matchLength: 100px;
@matchWidth: 30px;
@matchXie: 80px;

.main {
  box-sizing: border-box;
  height: 100%;
}

.show-result {
  padding: 100px 0;
  font-size: 1.5em;
  font-weight: bold;
}
</style>
